<template>
  <!-- 缴费方式 1-->
  <div class="payCostStatisticsOnly">
    <!-- {{payCostStatisticsType}} -->
    <div id="payCostStatisticsMain" class="payCostStatisticsMain"></div>

  </div>
</template>

<script>
import {
  chargeTypeStatistics, //请求饼图数据
} from '@/api/revenueHome/index'
import echarts from 'echarts'
export default {
  data() {
    return {
      echarts: '',
      bingList: [],
    }
  },
  props: ['payCostStatisticsType'],
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      let payCostStatisticsMain = document.getElementById(
        'payCostStatisticsMain'
      )
      payCostStatisticsMain.style.height = height - 40 + 'px'
      payCostStatisticsMain.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(payCostStatisticsMain)
      this.echarts.resize()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(
        document.querySelector('.payCostStatisticsMain')
      )
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: ['20', '20'],
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: '10%',
          itemWidth: 25,
          data: ['现金', '微信', '支付宝', '预存抵扣'],
        },
        // #2CC4D7, #1374FE, #D8D60E, #D8210E
        color: ['#2CC4D7', '#1374FE', '#D8D60E', '#D8210E'], //五个数据，五个颜色
        series: [
          {
            name: '缴费方式',
            type: 'pie',
            radius: '80%',
            // center: ['50%', '50%'],
            data: this.bingList,
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
          },
        ],
      }
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    async getChargeTypeStatisticsData(type, call) {
      // 先暂时写死  请求年的  后期到模块加传值后  修改
      console.log(type, 668)
      let queryType = type
      let params = {
        queryType,
      }
      const res = await chargeTypeStatistics(params)
      // console.log(res,'饼图请求返回数据');
      let abc = res.data
      let abcArr = []
      abcArr[0] = { value: abc[0], name: '现金' }
      abcArr[1] = { value: abc[1], name: '微信' }
      abcArr[2] = { value: abc[2], name: '支付宝' }
      abcArr[3] = { value: abc[3], name: '预存抵扣' }
      this.bingList = abcArr
      // console.log(abcArr,this.bingLi st,'饼图参数对么');

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          data: ['现金', '微信', '支付宝', '预存抵扣'],
        },
        series: [
          {
            color: ['#2CC4D7', '#1374FE', '#D8D60E', '#D8210E'],
            name: '缴费方式',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: abcArr,
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
          },
        ],
      })
      call && call()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  watch: {
    payCostStatisticsType(newValue) {
      this.payCostStatisticsType = newValue
      this.getChargeTypeStatisticsData(this.payCostStatisticsType)
    },
  },
  mounted() {
    this.createEcharts()
    this.getChargeTypeStatisticsData(this.payCostStatisticsType, () => {
      let width = document.querySelector('.payCostStatisticsOnly').parentNode
        .parentNode.parentNode.style.width
      let height = document.querySelector('.payCostStatisticsOnly').parentNode
        .parentNode.parentNode.clientHeight
      console.info('width--缴费：', width.split('p')[0], 'height--缴费', height)
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>
<style lang='scss' scoped>
.payCostStatisticsMain {
  width: 320px;
  height: 220px;
}
</style>
